<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Yo Documentation 起步</title>
    <link rel="stylesheet" href="source/app.css"/>
    <link rel="stylesheet" href="source/highlight.min.css">
    <style>
    #readme {
      margin-top: .2rem;
    }

    #readme .markdown-body h1:nth-of-type(1) {
      display: none;
    }

    #index .docs-nav .navbar-brand.index {
      color: #555;
    }

    #index .docs-header {
      padding: 1.2rem 0;
      text-align: center;
    }

    #index .docs-header .container > h1 {
      margin-bottom: 20px;
      font-size: .8rem;
    }

    #index .docs-header .container > p {
      width: auto;
      margin-right: 0;
    }

    #index .docs-header .container > a {
      display: inline-block;
      margin-top: .2rem;
      padding: 0.1rem 0.4rem;
      border: 1px solid;
      border-radius: 0.05rem;
      -webkit-background-clip: padding-box !important;
      -moz-background-clip: padding-box !important;
      -ms-background-clip: padding-box !important;
      background-clip: padding-box !important;
      color: #9dd8fc;
      font-size: .2rem;
      font-weight: bold;
    }

    #index .docs-header .container > .version {
      display: block;
      margin-top: .15rem;
      color: #89CDD6;
      font-size: .16rem;
    }

    #index .docs-header .container > a:hover {
      text-decoration: none;
      border-color: #9dd8fc;
      background-color: rgba(157, 216, 252, 0.6);
      color: #fff;
    }

    @media (min-width: 1200px) {
      #index .docs-header .container > p {
        padding: 0 1rem;
        font-size: .28rem;
      }
    }

    @media (min-width: 992px) and (max-width: 1199px) {
      #index .docs-header .container > p {
        padding: 0 0.6rem;
        font-size: .25rem;
      }
    }

    @media (min-width: 768px) and (max-width: 991px) {
      #index .docs-header .container > p {
        padding: 0 0.3rem;
        font-size: .21rem;
      }
    }

    @media (max-width: 767px) {
      #index .docs-header .container > p {
        padding: 0 0.2rem;
        font-size: .2rem;
      }
    }

    #index .markdown-body {
      text-align: center;
    }

    #index .markdown-body > h2 {
      margin-top: .8rem !important;
      border: none;
      font-size: .35rem;
    }

    #index .markdown-body > p {
      width: 80%;
      margin: auto;
      color: #666;
      font-size: .24rem;
    }

    @media (max-width: 767px) {
      #index .markdown-body > h2 {
        font-size: .28rem;
      }
      #index .markdown-body > p {
        font-size: .18rem;
      }
    }

    #index .markdown-body ul {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -moz-box-pack: center;
      -moz-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-flex-wrap: wrap;
      -moz-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      padding: 0;
      list-style: none;
    }

    #index .markdown-body ul > li {
      overflow: hidden;
      width: 200px;
      height: 200px;
      margin: 20px 10px 0;
      border: 1px solid #eee;
      border-radius: 0.05rem;
      -webkit-background-clip: padding-box !important;
      -moz-background-clip: padding-box !important;
      -ms-background-clip: padding-box !important;
      background-clip: padding-box !important;
    }

    #index .markdown-body ul > li:hover > p:not(:only-child):first-child {
      margin-top: -198px;
    }

    #index .markdown-body ul p {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -moz-box-pack: center;
      -moz-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -moz-box-align: center;
      -moz-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      width: 100%;
      height: 100%;
      -webkit-transition: margin-top 0.3s ease-in;
      -moz-transition: margin-top 0.3s ease-in;
      -ms-transition: margin-top 0.3s ease-in;
      transition: margin-top 0.3s ease-in;
      margin: 0;
    }

    #index .markdown-body ul p:not(:only-child):last-child {
      padding: .15rem;
      background-color: #eee;
    }

    #index .markdown-body ul img {
      max-width: 100%;
      max-height: 100%;
    }
    </style>
</head>
<body id="getting-started">
<a id="skippy" class="sr-only sr-only-focusable" href="#content"><div class="container"><span class="skiplink-text">Skip to main content</span></div></a>


<!-- Docs master nav -->
<header class="navbar navbar-static-top docs-nav" id="top" role="banner">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="./index.html" class="navbar-brand">Yo</a>
        </div>
        <nav id="bs-navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-left">
                
                
                
                
                
                <li class="active">
                    <a href="getting-started.html">起步</a>
                </li>
                
                
                
                
                
                <li class="">
                    <a href="core.html">核心</a>
                </li>
                
                
                
                
                
                <li class="">
                    <a href="element.html">元件</a>
                </li>
                
                
                
                
                
                <li class="">
                    <a href="animate.html">动画</a>
                </li>
                
                
                
                
                
                <li class="">
                    <a href="changelog.html">版本</a>
                </li>
                
                
                
                
                
                <li>
                    <a href="http://doyoe.github.io/Yo/demo/" target="_blank">示例</a>
                </li>
                
                
                
                
                
                <li>
                    <a href="https://github.com/doyoe/Yo" target="_blank">Github</a>
                </li>
                
                
                
            </ul>
        </nav>
    </div>
</header>

<!-- Docs page layout -->

<div class="docs-header" id="content">
    <div class="container">
        <h1>起步</h1>
        <p>本文详细描述 Yo 的使用方式，花上几分钟，下述的介绍将会帮助你快速的上手，并让自己沉浸在使用 Yo 的开发之中，感受到乐趣</p>
        <a href="https://github.com/doyoe/Yo/tree/"></a>
        
    </div>
</div>



<div class="container docs-container">
    
    
    <div id="readme">
        <article class="markdown-body">
            
            <h1 id="Yo">Yo</h1><p><code>Yo</code> 是基于 <code>Mobile First</code> 的策略而设计，并使用 <code>Sass</code> 开发的 <code>CSS Framework</code>，具备轻量，易用，可配置，强扩展等特性，同时也适应于PC端的高级浏览器。</p>
<p>在使用之前，请先确保你的机器有能够编译 <code>Sass</code> 的环境并开始去了解一些 <a href="http://sass-lang.com/">Sass</a> 相关的知识（当然，这非常简单）。</p>
<p>与其它框架不同的是，实际上我们并不计划对外提供打包好的 <code>yo.min.css</code> 来供使用，而是推荐直接在 <code>Yo</code> 的 <code>usage</code> 目录下进行开发。这样你将能体会到 <code>Yo</code> 的众多功能和方法为开发所带来的便利，并感受到它的魅力。</p>
<p>好了，请仔细看下面的步骤，这可以帮你快速搞定一切：</p>
<h2 id="内容">内容</h2><ul>
<li><a href="#quick-stat">环境搭建</a></li>
<li><a href="#how-to-start">如何开始</a></li>
<li><a href="#supported-browsers">浏览器支持</a></li>
<li><a href="#rules">工程约束</a></li>
<li><a href="#template">示例代码</a></li>
<li><a href="#attention">注意</a></li>
<li><a href="#documentation-and-demo">文档和实例</a></li>
<li><a href="#versioning">版本</a></li>
<li><a href="#bugs-and-feature-requests">问题及反馈</a></li>
<li><a href="#author">作者</a></li>
<li><a href="#copyright-and-license">版权和许可</a></li>
</ul>
<p><a name="quick-stat"></a></p>
<h2 id="环境搭建">环境搭建</h2><h3 id="基础环境">基础环境</h3><p>请确保你已经安装过下述环境：</p>
<ul>
<li>Bower</li>
<li>Node.js</li>
<li>npm</li>
</ul>
<h3 id="使用gulp构建">使用gulp构建</h3><ul>
<li>安装: <code>bower install yo</code></li>
<li>安装gulp: <code>npm install gulp -g --registry=https://registry.npm.taobao.org</code></li>
<li>安装依赖: <code>npm install --registry=https://registry.npm.taobao.org</code></li>
<li>在Yo根目录下运行:<ul>
<li><code>gulp watch</code>: 如果你想监听所有文件的变更</li>
<li><code>gulp build</code>: 如果你只是想build一次该项目</li>
</ul>
</li>
</ul>
<p><a name="how-to-start"></a></p>
<h2 id="如何开始">如何开始</h2><p>通过上述的 <code>环境搭建</code>，<code>Yo</code> 就已经可以在你的机器上跑起来了，在 <code>Yo</code> 根目录下运行 <code>gulp test</code>，会在 <code>usage/test</code> 目录生成一个 <code>test.css</code>，这表示一切OK（当然，项目中你可以将test文件夹移除）。</p>
<p><a name="rules"></a></p>
<h2 id="工程约束">工程约束</h2><p>真正的编码之前，先看一下 <code>Yo</code> 的目录结构是非常重要的，这有助于理解并更好的使用它：</p>
<ul>
<li><code>lib</code> 目录是 <code>Yo</code> 框架的底层代码，不要改动它，避免日后升级时遇到麻烦；</li>
<li><code>usage</code> 目录正是你的舞台，在这做业务的样式编码；<ul>
<li><code>usage/core</code> 目录下的都是配置文件，比如你想改变某些设定的初始值；</li>
<li>需要编译使用的文件（一般来说都是page级别的文件），放在 <code>usage/page</code> 目录下，编译后，会输出到 <code>usage/export</code> 目录；</li>
<li><code>usage</code> 下的其它目录和 <code>lib</code> 里的目录一一对应，用于放置扩展文件；</li>
</ul>
</li>
</ul>
<p><a name="template"></a></p>
<h2 id="示例代码">示例代码</h2><p>我们可以开始真正的使用 <code>Yo</code> 来进行编码了，下面将会展示一段最简单的代码，我们要做一个列表页，其对应的样式表文件为：<code>list.scss</code>：</p>
<pre><code>@charset &quot;utf-8&quot;;
@import &quot;../core/reset&quot;;
@import &quot;../fragment/yo-flex&quot;;
@import &quot;../fragment/yo-header&quot;;
@import &quot;../element/yo-list&quot;;

// 下面这段模块化的代码，请新建一个 `m-xxx` 的文件并将代码移过去，然后 `@import` 到这里
// 为了方便演示，所以下述代码直接写在了这里
.m-xxx {
    // 由于这里所需要的`list`和默认展示不同，所以使用 `yo-list` 进行扩展
    @include yo-list(
        $margin: .1rem,
        $border-width: 1px,
        $border-color: #ccc,
        $radius: .1rem
    );
}
</code></pre><p>首先，我们将 <code>reset</code> 引入 <code>list.scss</code>，这是必须的；该列表页由一个 <code>yo-header</code> 和 <code>yo-list</code> 组成，于是引入与之相关的2个元件；同时，我们想要使用 <code>flex</code> 布局，所以引入了 <code>yo-flex</code> 元件。</p>
<p>在页面上请使用 <code>list.scss</code> 编译后的 <code>list.css</code> 文件。</p>
<p><a name="attention"></a></p>
<h2 id="注意">注意</h2><p><code>Yo</code> 做了一些全局的定义，这些定义也让设计变得意思。</p>
<h3 id="文档模式">文档模式</h3><p>为了能够让你的样式得到完整的解析，我们推荐你使用 <code>HTML5 doctype</code>：</p>
<pre><code>&lt;!DOCTYPE html&gt;
</code></pre><h3 id="视窗viewport">视窗viewport</h3><p><code>Yo</code> 采用 <code>Mobile First</code> 的策略设计，首先要保证移动设备上的体验，至于不同的终端，可以配合 <code>响应式</code> 来做适配：</p>
<pre><code>&lt;meta name=&quot;viewport&quot; content=&quot;initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no&quot; /&gt;
</code></pre><p>如果应用需要考虑手动缩放的情况，可以将 <code>maximum-scale=1, user-scalable=no</code> 移除；但不建议移除 <code>minimum-scale=1</code>，因为页面可能会被缩小到难以阅读的程度。</p>
<h3 id="单位">单位</h3><p><code>Yo</code> 约束了2种项目所使用的长度单位</p>
<ul>
<li>所有涉及到 <code>border</code> 的长度单位都是用 <code>px</code>；</li>
<li>除 <code>border</code> 外，所有的长度设置都是用 <code>rem</code> 单位；</li>
</ul>
<h3 id="盒模型">盒模型</h3><p>为了让计算变得简单，我们改变了所有元素的盒模型，将其重置为 <code>border-box</code>。当然，也包括常用的伪元素 <code>::before</code> 和 <code>::after</code>。</p>
<pre><code>*,
::before,
::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
</code></pre><p>如果你长时间工作在 <code>PC</code> 平台上，这个设定可能需要一个适应的过程，但可以肯定的是，你一定会喜欢上它。</p>
<p><a name="supported-browsers"></a></p>
<h2 id="浏览器支持">浏览器支持</h2><ul>
<li>iOS6.0+</li>
<li>Android4.0+</li>
<li>Latest Stable: Chrome, Safari, Opera, IE10+</li>
</ul>
<p><a name="documentation-and-demo"></a></p>
<h2 id="实例和文档">实例和文档</h2><ul>
<li><a href="http://doyoe.github.io/Yo/demo/">View Demo</a></li>
<li><a href="http://doyoe.github.io/Yo/doc/">View Documentation</a></li>
</ul>
<p><a name="versioning"></a></p>
<h2 id="版本">版本</h2><p><code>Yo</code> 的版本方针遵循 <a href="http://semver.org/lang/zh-CN/">SemVer</a> 规范，版本号采用 <code>主版本号.次版本号.修订号</code> 的格式。版本发布周期是透明的，并尽可能保证向前向后兼容，您可以根据我们的语义化版本方针进行版本控制。</p>
<p><code>master</code> 分支为开发版本，稳定版本都发布在 <a href="https://github.com/doyoe/Yo/releases">releases tag</a> 中。</p>
<p><strong>最新稳定版: <a href="https://github.com/doyoe/Yo/releases/tag/v2.1.3">v2.1.3</a></strong></p>
<p><strong>开发中版本: v2.1.4</strong></p>
<p>如想查看更多版本变更历史，请查看 <a href="https://github.com/doyoe/Yo/blob/master/changelog.md">ChangeLog</a></p>
<p><a name="bugs-and-feature-requests"></a></p>
<h2 id="问题及反馈">问题及反馈</h2><p>如果您的项目正在使用<code>Yo</code>，过程中发现了任何问题，或者有任何帮助<code>Yo</code>更完善的想法和建议，请直接给我提<a href="https://github.com/doyoe/Yo/issues/new">Issues</a>和<a href="https://github.com/doyoe/Yo/pulls">Pull Requests</a>。</p>
<p><a name="author"></a></p>
<h2 id="作者">作者</h2><p>杜瑶，我目前居住在北京，就职于 <a href="http://www.qunar.com">Qunar</a>，您可以在 <a href="https://github.com/doyoe">Github</a> 或者 <a href="http://weibo.com/doyoe">Weibo</a> 看到我的最近动态。当然，也可以通过我的<a href="http://www.doyoe.com">个人站点</a>，博客：<a href="http://blog.doyoe.com">CSS探索之旅</a>，<a href="http://css.doyoe.com">CSS参考手册</a> 和 <a href="http://demo.doyoe.com">Web前端实验室</a> 等信息了解更多。</p>
<p><a name="copyright-and-license"></a></p>
<h2 id="版本和许可">版本和许可</h2><p>源码和文档版权属于 <a href="http://www.doyoe.com">doyoe.com</a>。源码发布基于 <a href="http://opensource.org/licenses/MIT">the MIT license</a> 开源协议。文档发布基于 <a href="http://creativecommons.org/licenses/by/4.0/">Creative Commons</a> 开源协议。</p>

        </article>
    </div>
    
    
</div>

<!-- Footer
================================================== -->
<footer class="docs-footer" role="contentinfo">
    <div class="container">
        <p>Made By Doyoe.com © 2014 - 2016</p>
    </div>
</footer>

<script src="source/jquery.min.js"></script>
<script src="source/bootstrap.min.js"></script>
<script src="source/docs.min.js"></script>
<script src="source/highlight.min.js"></script>
<script>
    $(document).ready(function() {
        $('code').each(function(i, block) {
            if (block.innerHTML.indexOf('\n') != -1) {
                var pn = block.parentNode;
                if (pn.tagName.toUpperCase() == 'PRE') {
                    try {
                        hljs.highlightBlock(block);
                    } catch(e) {}
                } else {
                    pn.innerHTML = '<pre><code>' + block.innerHTML + '</code></pre>';
                    try {
                        hljs.highlightBlock(pn.childNodes[0].childNodes[0]);
                    } catch(e) {}
                }
            }
        });

        var winHeight = $(window).height() - 40;

        $('.docs-sidebar').height(winHeight);

        var activeMenu,
            sidebar = $('.docs-sidebar'),
            barScroll = false;

        sidebar.on('mouseover', function() {
            barScroll = true;
        });

        sidebar.on('mouseout', function() {
            barScroll = false;
        });

        $(window).on('scroll', function(e) {
            if (!barScroll) {
                var activeItem = $('.docs-sidebar li.active a');
                if (activeItem.length) {
                    if (!activeMenu || (activeMenu.attr('href') != activeItem.attr('href'))) {
                        activeMenu = activeItem;
                        var top = activeMenu.offset().top - sidebar.offset().top;
                        if (top < 0) {
                            sidebar.scrollTop(sidebar.scrollTop() + top);
                        } else if (top > winHeight - 30) {
                            sidebar.scrollTop(sidebar.scrollTop() + top - winHeight + 30);
                        }
                    }
                }
            }
        });
    });
</script>
</body>
</html>
